<template>
  <div class="question-container">
    <div class="el-card">
      <!--头部-->
      <quertions-randoms-hard-liqiushi
        :subjectIDBody="subjectIDBody"
        :catalogIDBody="catalogIDBody"
        :tagsBody="tagsBody"
        :creatorBody="creatorBody"
        :form="questionRandomsForm"
        @hook:created="setHardMethods"
        @liqiushi="liqiushi"
        ref="header"
        @btnResetFields="btnResetFields"
      />

      <!--主体-->
      <questions-randoms-tab-liqiushi :randomsList="randomsList" />
    </div>
  </div>
</template>

<script>
import QuertionsRandomsHardLiqiushi from '@/module-hmmm/components/questions-randoms-heard-liqiushi'
import QuestionsRandomsTabLiqiushi from '@/module-hmmm/components/questions-randoms-Tab-liqiushi'
import { mapActions, mapGetters, mapMutations } from 'vuex'

export default {
  name: 'questions-randoms',
  components: {
    QuestionsRandomsTabLiqiushi,
    QuertionsRandomsHardLiqiushi
  },
  async created () {
    await this.getAsyncRandomsList()
    // await console.log(this.randomsList)
  },
  methods: {
    // 从Vuex中获取数据
    ...mapMutations('questionsRandoms', ['setCatalogIDBody', 'setRandomsList', 'setRandomsListParams']),
    ...mapActions('questionsRandoms', ['getAsyncSubjectIDBody', 'getAsyncCatalogIDBody', 'getAsyncTagsBody', 'getAsyncCreatorBody', 'getAsyncRandomsList', 'getAsyncRandomsListParams']),
    // 用于监听头部组件的生命周期
    async setHardMethods () {
      await this.getAsyncSubjectIDBody()
      // await console.log('监听到了子组件的生命周期')
      await this.getAsyncCreatorBody()
    },
    /*
    * 发送按钮请求的旧方案 已废弃
    * */
    // 搜索按钮
    // async liqiushis () {
    //   // 根据学科和关键字进行搜索
    //   const subID = this.questionRandomsForm.subjectID
    //   // 获取对应学科的索引
    //   var subjectID = ''
    //   // 得在选择了学科之后才可以进行寻找学科所对应的id
    //   if (subID) {
    //     const newList = this.subjectIDBody.filter(item =>
    //       item.label === subID
    //     )
    //     subjectID = newList[0].value
    //   }
    //   // 获取双向绑定的关键字
    //   const keyword = this.questionRandomsForm.keyword
    //   const newParams = { subjectID, keyword, page: 1, pagesize: 5 }
    //   // 将对象的key获取并循环 key  给对象去空 用来更好的发送请求
    //   // 通过对象合并来优化请求
    //   Object.assign(this.randomsListParams, newParams)
    //   Object.keys(this.randomsListParams).forEach(function (key) {
    //     // 如果对象中的值为空
    //     if (!newParams[key]) {
    //       delete newParams[key]
    //     }
    //   })
    //   const { data } = await getRandomsList(newParams)
    //   await this.setRandomsList(data.items)
    // },
    liqiushi () {
      // 发送请求的按钮
      // this.getAsyncRandomsListParams({ liqiushi: 720 })
      // 搜素按钮直接通过调用异步请求就可以
      this.getAsyncRandomsListParams({})
    },
    btnResetFields () {
      this.$refs.header.$refs.ruleForm.resetFields()
      this.$store.commit('questionsRandoms/setRandomsListParams', {
        // 学科索引值
        subjectID: '',
        // 关键词搜索
        keyword: ''
      })
    }

  },

  watch: {
    // 对选择学科之后进行动态的响应请求
    'questionRandomsForm.subjectID': {

      async handler (newValue) {
        // 一个bug 当数据重置的时候 监听器仍会运作 二级目录从空里面拿值 报错
        if (newValue) {
          // console.log(newValue, oldValue, '组件赋值')
          // 获取对应学科的索引
          const newList = this.subjectIDBody.filter(item =>
            item.label === this.questionRandomsForm.subjectID
          )
          const id = newList[0].value
          // 将id动态传入到vuex中的请求参数对象中
          await this.setRandomsListParams({ subjectID: id })
          // 获得设置对应学科的二级目录
          await this.getAsyncCatalogIDBody(id)
          // 获取设置对应学科的标签
          await this.getAsyncTagsBody(id)
        }
      }
    },
    // 对关键字的变化进行 vuex中的参数列表的修改
    'questionRandomsForm.keyword': {
      async handler (newValue) {
        await this.setRandomsListParams({ keyword: newValue })
      }
      // 将关键字动态传入到vuex中的请求参数对象中

    }
  },
  computed: {
    ...mapGetters(['subjectIDBody', 'catalogIDBody', 'tagsBody', 'creatorBody', 'questionRandomsForm', 'randomsList'])
  }

}
</script>
<style scoped lang="scss">
.question-container {
  margin: 10px;

  ::v-deep.el-card {
    padding: 20px;
  }
}
</style>
